<template>
  <view>
    <image class="top" :src="hdInfo.image" mode="scaleToFill" />
    <view class="main">
      <view class="title">{{ hdInfo.theme }}</view>
      <view class="ctn">{{ hdInfo.introduce }}</view>
      <view class="btnBox">
        <u-button type="primary" @click="goPage(`/pages/entertainment/publish?activityId=${hdInfo.id}&theme=${hdInfo.theme}`)" color="#F1C772" shape="circle">上传作品</u-button>
        <u-button type="primary" @click="goPage(`/pages/entertainment/zpList?activityId=${hdInfo.id}&pageType=my`)" color="#F1C772" plain shape="circle">我的投稿</u-button>
      </view>
      <view class="jx"> {{ hdInfo.reward || "暂无" }}</view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { useFilesStore } from "@/stores/files";
import { goPage } from "@/utils/commonFn";
const hdInfo = useFilesStore().hdInfo;
console.log(hdInfo);
</script>
<style lang="less" scoped>
.top {
  width: 100%;
  height: 360rpx;
  background: #d0c294;
}
.title {
  text-align: center;
  margin-top: 58rpx;
  margin-bottom: 32rpx;
  font-size: 32rpx;
  color: #000000;
}
.ctn {
  font-size: 28rpx;
  color: #767676;
  line-height: 44rpx;
  text-align: center;
}
.btnBox {
  padding: 0 60rpx;
  display: flex;
  justify-content: space-between;
  gap: 50rpx;
  margin-top: 80rpx;
  margin-bottom: 56rpx;
}
.jx {
  background: #f6f2e9;
  border-radius: 32rpx;
  padding: 52rpx;
  text-align: center;
}
</style>
